<template>
  <div class="dashboard">
    <h1>欢迎使用学生信息管理系统</h1>
    
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon student"><User /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ stats.studentCount }}</div>
              <div class="stats-label">在校学生</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon grade"><Document /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ stats.gradeCount }}</div>
              <div class="stats-label">成绩记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon reward"><Trophy /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ stats.rewardCount }}</div>
              <div class="stats-label">奖励记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :lg="6">
        <el-card class="stats-card">
          <div class="stats-content">
            <el-icon class="stats-icon punishment"><Warning /></el-icon>
            <div class="stats-info">
              <div class="stats-value">{{ stats.punishmentCount }}</div>
              <div class="stats-label">惩罚记录</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span>系统说明</span>
        </div>
      </template>
      
      <el-descriptions :column="1" border>
        <el-descriptions-item label="系统名称">学生信息管理系统</el-descriptions-item>
        <el-descriptions-item label="版本号">v1.0.0</el-descriptions-item>
        <el-descriptions-item label="当前用户">{{ userStore.userName }}</el-descriptions-item>
        <el-descriptions-item label="用户角色">{{ getRoleName(userStore.userRole) }}</el-descriptions-item>
      </el-descriptions>
      
      <div class="features">
        <h3>主要功能</h3>
        <ul>
          <li>学生信息管理：录入、查询、修改、删除学生基本信息</li>
          <li>Excel导入导出：支持批量导入学生信息和导出筛选结果</li>
          <li>成绩管理：记录和管理学生各科成绩</li>
          <li>奖惩管理：记录学生获奖和处分信息</li>
          <li>权限管理：不同角色拥有不同的操作权限</li>
          <li>数据安全：所有数据加密存储，确保信息安全</li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { User, Document, Trophy, Warning } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const stats = ref({
  studentCount: 0,
  gradeCount: 0,
  rewardCount: 0,
  punishmentCount: 0
})

const getRoleName = (role: string | undefined) => {
  const roleMap: Record<string, string> = {
    admin: '系统管理员',
    teacher: '教师',
    counselor: '辅导员'
  }
  return roleMap[role || ''] || '未知'
}

onMounted(async () => {
  // 这里可以调用API获取统计数据
  // 暂时使用模拟数据
  stats.value = {
    studentCount: 1250,
    gradeCount: 8960,
    rewardCount: 342,
    punishmentCount: 28
  }
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

h1 {
  margin-bottom: 30px;
  font-size: 28px;
  color: #303133;
}

.stats-row {
  margin-bottom: 20px;
}

.stats-card {
  margin-bottom: 20px;
}

.stats-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stats-icon {
  font-size: 48px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.stats-icon.student {
  color: #409eff;
  background-color: #ecf5ff;
}

.stats-icon.grade {
  color: #67c23a;
  background-color: #f0f9ff;
}

.stats-icon.reward {
  color: #e6a23c;
  background-color: #fdf6ec;
}

.stats-icon.punishment {
  color: #f56c6c;
  background-color: #fef0f0;
}

.stats-info {
  flex: 1;
}

.stats-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.stats-label {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.info-card {
  margin-top: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}

.features {
  margin-top: 20px;
}

.features h3 {
  font-size: 16px;
  margin-bottom: 15px;
  color: #303133;
}

.features ul {
  list-style-position: inside;
  line-height: 2;
  color: #606266;
}

.features li {
  padding-left: 10px;
}
</style>

